<template>
  <div class="trade-page-root">
    <el-page-header
      title="返回"
      :content="options[page - 1].label"
      @back="$router.back()"
    >
    </el-page-header>

    <!-- 市场首页 -->
    <div v-if="page == 1" class="market-container">
      <div class="search-section">
        <div class="search-row">
          <el-input
            v-model="searchKey"
            placeholder="搜索商品名称..."
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
            @clear="handleSearch"
          >
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
            <template #append>
              <el-button @click="handleSearch" type="primary">
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
        <div class="filter-row">
          <el-select
            v-model="selectedCategory"
            placeholder="选择分类"
            clearable
            class="category-select"
            @change="handleCategoryChange"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="category in categories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
          <el-select
            v-model="selectedQuality"
            placeholder="选择品质"
            clearable
            class="quality-select"
            @change="handleQualityChange"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="qualityOption in qualityOptions"
              :key="qualityOption.value"
              :label="qualityOption.label"
              :value="qualityOption.value"
            >
              <span
                :style="{
                  background: qualityOption.gradient,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }"
              >
                {{ qualityOption.label }}
              </span>
            </el-option>
          </el-select>
          <el-select
            v-model="selectedSort"
            placeholder="排序方式"
            class="sort-select"
            @change="handleSortChange"
          >
            <el-option
              v-for="sortOption in sortOptions"
              :key="sortOption.value"
              :label="sortOption.label"
              :value="sortOption.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 道具展示区域 -->
      <div class="items-list scroll_box">
        <div class="items-transition-container">
          <HandDrawnCard
            v-for="(item, key) in propList"
            :key="`${item._id || key}-${animationKey}`"
            variant="default"
            size="medium"
            class="item-card-wrapper"
            :class="{ 'animate-in': showItems }"
            :style="{ animationDelay: `${key * 0.15}s` }"
          >
            <div class="item-card">
              <div class="item-left">
                <span class="item-emoji">{{ item.emoji || "📦" }}</span>
                <span
                  class="item-name"
                  :style="{
                    background: getQualityGradient(item.quality),
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                  }"
                  >{{ item.name }}X{{ item.sell_cont }}</span
                >
              </div>
              <div class="item-right">
                <span class="item-price">💰 {{ item.sell_price }}</span>
                <HandDrawnCard
                  variant="default"
                  size="small"
                  @click="open_MarketItemInfo(item)"
                >
                  查看
                </HandDrawnCard>
              </div>
            </div>
          </HandDrawnCard>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          background
          small
        />
      </div>
    </div>

    <!-- 未开发界面 -->
    <div v-if="page == 2" class="bag-container"></div>

    <!-- 底部按钮 -->
    <el-segmented
      @change="pageChange"
      style="width: 100%"
      v-model="page"
      :options="options"
      size="small"
      class="bottom-btn"
    >
      <template #default="scope">
        <div style="padding: 5px 0">
          <el-icon size="20">
            <component :is="scope.item.icon" />
          </el-icon>
          <div>{{ scope.item.label }}</div>
        </div>
      </template>
    </el-segmented>

    <!-- 道具弹窗 -->
    <teleport to="body">
      <div
        v-if="Pop_MarketItemInfo"
        class="hand-drawn-item-overlay"
        @click="handleOverlayClick"
      >
        <div class="hand-drawn-item-container" @click.stop>
          <div class="hand-drawn-item-card" ref="itemCardRef" v-loading="loading">
            <!-- 手绘边框 SVG -->
            <svg
              class="hand-drawn-border"
              :width="itemSvgWidth"
              :height="itemSvgHeight"
              xmlns="http://www.w3.org/2000/svg"
              ref="itemSvgRef"
            ></svg>

            <!-- 对话框内容 -->
            <div class="item-content">
              <!-- 关闭按钮 -->
              <div class="close-btn" @click="closeItemInfo">×</div>

              <!-- 标题 -->
              <h3 class="item-title">物品详细</h3>

              <!-- 图标 -->
              <div class="item-icon-section">
                <div v-if="marketItemDataV2.icon" class="item-icon-wrapper">
                  <img :src="marketItemDataV2.icon" class="item-icon-img" />
                </div>
                <div v-else class="item-icon-wrapper">
                  <div class="emoji-container">
                    <span class="item-emoji" style="font-size: 30px">{{
                      marketItemDataV2.emoji
                    }}</span>
                  </div>
                </div>
              </div>

              <!-- 属性列表 -->
              <div class="item-properties">
                <div
                  v-for="(item, key) in marketItemDataV2.list"
                  :key="key"
                  class="property-item"
                >
                  <span class="property-key">{{ item.key }}</span>
                  <div class="property-value" v-html="item.val"></div>
                </div>
              </div>

              <!-- 按钮组 -->
              <div v-if="!showQuantitySelector" class="item-buttons">
                <HandDrawnCard
                  variant="secondary"
                  size="small"
                  @click="closeItemInfo"
                  class="cancel-btn"
                >
                  取消
                </HandDrawnCard>

                <HandDrawnCard
                  variant="primary"
                  size="small"
                  @click="handleBuyClick"
                  class="confirm-btn"
                >
                  购买
                </HandDrawnCard>
              </div>

              <!-- 数量选择器 -->
              <div v-if="showQuantitySelector" class="quantity-selector">
                <div class="quantity-title">选择购买数量</div>
                <div class="quantity-slider-container">
                  <el-slider
                    v-model="selectedQuantity"
                    :min="1"
                    :max="maxQuantity"
                    :step="1"
                    :show-input-controls="false"
                    class="quantity-slider"
                  />
                </div>
                <div class="quantity-info">
                  当前选择: {{ selectedQuantity }} / {{ maxQuantity }}
                </div>
                <div class="quantity-buttons">
                  <HandDrawnCard
                    variant="secondary"
                    size="small"
                    @click="cancelQuantitySelector"
                    class="cancel-quantity-btn"
                  >
                    取消
                  </HandDrawnCard>
                  <HandDrawnCard
                    variant="primary"
                    size="small"
                    @click="confirmBuy"
                    class="confirm-quantity-btn"
                  >
                    确认购买
                  </HandDrawnCard>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script lang="ts">
import { ref, computed } from "vue";
import {
  Search,
  Box,
  Trophy,
  Basketball,
  MagicStick,
  Star,
  Medal,
} from "@element-plus/icons-vue";
import { Options, Vue } from "vue-class-component";
import { callApi } from "@/tool/server";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { HandDrawnNotification } from "@/tool/handDrawnToast";
import HandDrawnCard from "@/components/HandDrawnCard.vue";
import { ItemType, quality, sort_type } from "@/shared/face/enums";
import { getQualityText, getQualityGradient } from "@/shared/utils/quality";
import rough from "roughjs";
import { panel_common } from "@/shared/face";
import { marketListItem } from "@/shared/poto/market/PtlList";

@Options({
  components: {
    Search,
    IconPicture,
    HandDrawnCard,
  },
})
export default class TradePage extends Vue {
  // 市场道具弹窗
  Pop_MarketItemInfo = false;
  searchKey = "";
  selectedCategory = "";
  selectedQuality = "";
  selectedSort = sort_type.time_down; // 默认按时间降序
  page = 1;
  loading = true;

  // 分页相关状态
  currentPage = 1;
  pageSize = 20;
  total = 0;

  // 动画相关状态
  animationKey = 0;
  showItems = false;

  // 手绘弹窗相关状态
  itemSvgWidth = 400;
  itemSvgHeight = 500;
  itemCardRef!: HTMLElement;
  itemSvgRef!: SVGSVGElement;

  options = [
    { label: "市场", value: 1, icon: "School" },
    { label: "未开发", value: 2, icon: "Handbag" },
    { label: "未开发", value: 3, icon: "Coin" },
  ];
  categories = [
    { label: "资源", value: ItemType.资源 },
    { label: "装备", value: ItemType.装备 },
    { label: "道具", value: ItemType.道具 },
    { label: "技能书", value: "技能书" },
    { label: "宠物蛋", value: "宠物蛋" },
    { label: "血统卷轴", value: "血统卷轴" },
    { label: "盲盒", value: "盲盒" },
    { label: "形象卡", value: "形象卡" },
  ];
  propList: any[] = [
    {
      name: "测试8道具·JJ·超长名字测试",
      icon:
        "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
      sell_price: 999,
      emoji: "🔫",
      type: ItemType.装备,
      quality: quality.A,
      sell_cont: 1,
    },
    {
      name: "魔法剑",
      icon: "",
      emoji: "🗡️",
      sell_price: 500,
      type: ItemType.装备,
      quality: quality.B,
      sell_cont: 2,
    },
    {
      name: "铁甲",
      icon: "",
      emoji: "🛡️",
      sell_price: 300,
      type: ItemType.装备,
      quality: quality.C,
      sell_cont: 1,
    },
    {
      name: "生命药水",
      icon: "",
      emoji: "💊",
      sell_price: 100,
      type: ItemType.道具,
      quality: quality.C,
      sell_cont: 5,
    },
    {
      name: "蓝宝石",
      icon: "",
      emoji: "💎",
      sell_price: 800,
      type: ItemType.道具,
      quality: quality.A,
      sell_cont: 1,
    },
    {
      name: "稀有材料",
      icon: "",
      emoji: "💎",
      sell_price: 200,
      type: ItemType.道具,
      quality: quality.B,
      sell_cont: 3,
    },
  ];
  marketItemId: string = "";
  marketItemDataV2!: panel_common;

  // 购买数量选择器相关
  showQuantitySelector = false;
  selectedQuantity = 1;
  maxQuantity = 1;
  async mounted(): Promise<void> {
    await this.loadMarketList();
    this.loading = false;
  }

  async loadMarketList() {
    this.loading = true;

    // 构建请求参数
    const params: any = {
      page: this.currentPage,
    };

    // 添加分类筛选
    if (this.selectedCategory) {
      params.type = this.selectedCategory;
    }

    // 添加搜索关键词
    if (this.searchKey) {
      params.name = this.searchKey;
    }

    // 添加品质筛选
    if (this.selectedQuality !== "") {
      params.quality = this.selectedQuality;
    }

    // 添加排序参数
    params.sort = this.selectedSort;

    console.log("请求参数:", params); // 调试信息

    let res = await callApi("market/List", params);
    this.loading = false;

    if (!res) {
      return;
    }

    console.log("返回数据:", res); // 调试信息

    // 先隐藏所有项目
    this.showItems = false;
    this.animationKey++; // 强制重新渲染

    // 更新数据
    this.propList = res.list;
    this.total = res.total;

    // 延迟后开始显示动画
    this.$nextTick(() => {
      setTimeout(() => {
        this.showItems = true;
      }, 100); // 短暂延迟确保DOM更新完成
    });
  }

  // 处理搜索
  async handleSearch() {
    console.log("搜索触发，关键词:", this.searchKey); // 调试信息
    this.currentPage = 1; // 重置到第一页
    await this.loadMarketList();
  }

  // 处理分类变化
  async handleCategoryChange() {
    this.currentPage = 1; // 重置到第一页
    await this.loadMarketList();
  }

  // 处理分页变化
  async handlePageChange(page: number) {
    this.currentPage = page;
    await this.loadMarketList();
  }

  async open_MarketItemInfo(data: marketListItem) {
    this.loading = true;
    this.marketItemId = data._id;
    let res = await callApi("market/Info", { id: this.marketItemId });
    this.loading = false;
    if (!res) {
      return;
    }
    this.Pop_MarketItemInfo = true;
    this.marketItemDataV2 = res.info2;

    // 初始化手绘边框
    this.$nextTick(() => {
      this.initializeItemBorder();
    });
  }

  async pageChange(e: any) {
    switch (e) {
      case 1:
        // 市场页面
        break;
      case 2:
        // 背包页面 - 刷新背包数据
        break;
      case 3:
        // 在售页面
        break;
    }
  }

  formatTimestamp(timestamp: number) {
    // 处理10位Unix时间戳（秒）转为13位JS时间戳（毫秒）
    if (timestamp.toString().length === 10) {
      timestamp *= 1000;
    }

    const date = new Date(timestamp);

    // 获取日期组件
    const month = date.getMonth() + 1; // 月份从0开始
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    // 格式化为两位数
    const pad = (n: number) => n.toString().padStart(2, "0");

    return `${pad(month)}-${pad(day)} ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
  }

  // 处理购买按钮点击
  handleBuyClick() {
    // 查找道具的数量信息
    const quantityItem = this.marketItemDataV2.list.find(
      (item) => item.key === "数量" || item.key === "数量" || item.key.includes("数量")
    );

    if (quantityItem && quantityItem.val) {
      const quantity = parseInt(quantityItem.val.toString());
      if (quantity > 1) {
        // 数量大于1，显示数量选择器
        this.maxQuantity = quantity;
        this.selectedQuantity = 1;
        this.showQuantitySelector = true;
      } else {
        // 数量为1，直接购买
        this.buy_item(this.marketItemId, 1);
      }
    } else {
      // 没有找到数量信息，默认购买1个
      this.buy_item(this.marketItemId, 1);
    }
  }

  // 确认购买
  confirmBuy() {
    this.buy_item(this.marketItemId, this.selectedQuantity);
    this.showQuantitySelector = false;
  }

  // 取消数量选择
  cancelQuantitySelector() {
    this.showQuantitySelector = false;
    this.selectedQuantity = 1;
  }

  // 关闭道具信息弹窗
  closeItemInfo() {
    this.Pop_MarketItemInfo = false;
    this.showQuantitySelector = false;
    this.selectedQuantity = 1;
  }

  async buy_item(buy_id: string, count: number) {
    this.loading = true;
    let res = await callApi("market/Buy", { id: buy_id, count: count });
    this.loading = false;
    if (!res) {
      return;
    }
    this.Pop_MarketItemInfo = false;
    this.showQuantitySelector = false;
    this.selectedQuantity = 1;

    // 购买成功后刷新市场列表
    await this.loadMarketList();

    HandDrawnNotification.success({
      title: "购买成功",
      message: "道具已放入背包",
    });
  }

  // 工具方法
  getItemIcon(type: string) {
    const iconMap = {
      weapon: Trophy,
      armor: Basketball,
      potion: MagicStick,
      gem: Star,
      material: Box,
      rare: Medal,
    };
    return iconMap[type as keyof typeof iconMap] || Box;
  }

  getQualityText(q: quality) {
    return getQualityText(q);
  }

  getQualityGradient(q: quality) {
    return getQualityGradient(q);
  }

  // 品质选项
  get qualityOptions() {
    return [
      { label: "普通", value: quality.F, gradient: getQualityGradient(quality.F) },
      { label: "高级", value: quality.D, gradient: getQualityGradient(quality.D) },
      { label: "稀有", value: quality.C, gradient: getQualityGradient(quality.C) },
      { label: "神器", value: quality.B, gradient: getQualityGradient(quality.B) },
      { label: "史诗", value: quality.A, gradient: getQualityGradient(quality.A) },
      { label: "传说", value: quality.S, gradient: getQualityGradient(quality.S) },
      { label: "神话", value: quality.SS, gradient: getQualityGradient(quality.SS) },
      { label: "至尊", value: quality.SSS, gradient: getQualityGradient(quality.SSS) },
      { label: "永恒", value: quality.SR, gradient: getQualityGradient(quality.SR) },
      { label: "太初", value: quality.SSR, gradient: getQualityGradient(quality.SSR) },
    ];
  }

  // 处理品质变化
  async handleQualityChange() {
    this.currentPage = 1; // 重置到第一页
    await this.loadMarketList();
  }

  // 排序选项
  get sortOptions() {
    return [
      { label: "时间↑", value: sort_type.time_up },
      { label: "时间↓", value: sort_type.time_down },
      { label: "价格↓", value: sort_type.price_down },
      { label: "价格↑", value: sort_type.price_up },
      { label: "品质↑", value: sort_type.quality_up },
      { label: "品质↓", value: sort_type.quality_down },
      { label: "数量↑", value: sort_type.count_up },
      { label: "数量↓", value: sort_type.count_down },
    ];
  }

  // 处理排序变化
  async handleSortChange() {
    console.log("排序变化触发，排序方式:", this.selectedSort); // 调试信息
    this.currentPage = 1; // 重置到第一页
    await this.loadMarketList();
  }

  // 处理遮罩点击
  handleOverlayClick() {
    this.Pop_MarketItemInfo = false;
  }

  // 初始化手绘边框
  initializeItemBorder() {
    this.$nextTick(() => {
      if (this.itemCardRef && this.itemSvgRef) {
        this.updateItemSvgSize();
        this.drawItemHandDrawnBorder();
      }
    });
  }

  // 更新SVG尺寸
  updateItemSvgSize() {
    if (!this.itemCardRef) return;

    const borderOverflow = 8;
    const width = this.itemCardRef.offsetWidth + borderOverflow * 2;
    const height = this.itemCardRef.offsetHeight + borderOverflow * 2;

    this.itemSvgWidth = width;
    this.itemSvgHeight = height;
  }

  // 绘制手绘边框
  drawItemHandDrawnBorder() {
    if (!this.itemSvgRef || this.itemSvgWidth === 0 || this.itemSvgHeight === 0) {
      return;
    }

    const svg = this.itemSvgRef;

    try {
      const rc = rough.svg(svg);

      // 清除之前的路径
      svg.innerHTML = "";

      const padding = 4;
      const width = this.itemSvgWidth - padding * 2;
      const height = this.itemSvgHeight - padding * 2;

      if (width <= 0 || height <= 0) {
        return;
      }

      // 绘制手绘矩形
      const rect = rc.rectangle(padding, padding, width, height, {
        roughness: 1.2,
        bowing: 0.5,
        stroke: "#fff",
        strokeWidth: 2,
        seed: 1,
        fill: "none",
      });

      svg.appendChild(rect);
    } catch (error) {
      console.error("Error drawing hand-drawn border:", error);
    }
  }
}
</script>

<style scoped>
.trade-page-root {
  display: flex;
  flex-direction: column;
  background: #222d22;
  color: #fff;
}

.search-section {
  padding: 0 10px;

  .search-row {
    margin-bottom: 10px;
  }

  .search-input {
    width: 100%;
  }

  .filter-row {
    display: flex;
    gap: 10px;
  }

  .category-select {
    width: 120px;
  }

  .quality-select {
    width: 120px;
  }

  .sort-select {
    width: 120px;
  }
}

.market-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  height: calc(70vh);
  padding: 0 10px;
}

.items-transition-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-card-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.item-card-wrapper.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.item-card-wrapper {
  height: 44px;
  padding: 0;
  margin: 6px 0px;
  width: 100%;
}

.item-card {
  width: 90%;
  height: 100%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 0;
  background: transparent;
  color: #fff;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.item-emoji {
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.item-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  min-width: 60px;
}

.item-price {
  font-size: 12px;
  color: #ffe066;
  font-weight: 500;
  flex-shrink: 0;
}

.item-rarity {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
  color: white;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8);
  width: 25px;
  text-align: center;
  flex-shrink: 0;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
  z-index: 10;
  background: #222d22;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  border-top: none;
}

.bag-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100vh - 53px - 60px);
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background: #222d22;
}

::v-deep(.el-drawer__header) {
  margin-bottom: 0px;
}

::v-deep(.el-drawer__body) {
  padding-left: 5px;
  padding-right: 5px;
}

::v-deep(.el-divider--horizontal) {
  margin: 2px 0;
}

::v-deep(.el-segmented__item-selected) {
  border-radius: 10px 10px 0 0;
}

.emoji-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 手绘道具弹窗样式 */
.hand-drawn-item-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease-out;
}

.hand-drawn-item-container {
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 确保弹窗居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hand-drawn-item-card {
  position: relative;
  background: #222d22;
  border-radius: 12px;
  min-width: 370px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  color: #fff;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  box-shadow: 3px 3px 0 #111a11;
  overflow: hidden;

  /* 确保弹窗有良好的层叠上下文 */
  z-index: 1;
}

.hand-drawn-border {
  position: absolute;
  top: -4px;
  left: -4px;
  pointer-events: none;
  z-index: 1;
}

.item-content {
  position: relative;
  z-index: 2;
  padding: 30px 25px 25px;

  /* 确保内容不会被边框遮挡 */
  margin: 4px;
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
  z-index: 10;

  &:hover {
    color: #fff;
  }
}

.item-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px 0;
  text-align: center;
  line-height: 1.4;
}

.item-icon-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.item-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-icon-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.item-emoji {
  font-size: 30px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.item-properties {
  margin-bottom: 25px;
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 230, 102, 0.5) transparent;
  position: relative;

  /* 滚动指示器 */
  &::before {
    content: "";
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 230, 102, 0.3),
      transparent
    );
    z-index: 1;
  }

  &::after {
    content: "";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 230, 102, 0.3),
      transparent
    );
    z-index: 1;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 230, 102, 0.5);
    border-radius: 3px;

    &:hover {
      background: rgba(255, 230, 102, 0.7);
    }
  }
}

.property-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  border-radius: 4px;
  margin-bottom: 4px;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  &:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }

  &:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 8px;
    padding-right: 8px;
    transform: translateY(-1px);
  }
}

.property-key {
  font-size: 14px;
  color: #ffe066;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;

  &::after {
    content: ":";
    margin-left: 2px;
    opacity: 0.7;
  }
}

.property-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  border-left: 2px solid rgba(255, 230, 102, 0.3);
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;

  /* 为极长的数字或URL添加更好的换行 */
  word-wrap: break-word;
  overflow-wrap: anywhere;

  /* 确保在所有情况下都有良好的可读性 */
  min-height: 1.6em;

  /* HTML 内容样式 */
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 4px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
  }

  /* 确保文本和图片混合时的布局 */
  :deep(p) {
    margin: 4px 0;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 230, 102, 0.5);
  }

  /* 为非常长的单词添加额外的换行支持 */
  &::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    clear: both;
  }
}

.item-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;

  .cancel-btn,
  .confirm-btn {
    min-width: 80px;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

/* 数量选择器样式 */
.quantity-selector {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 230, 102, 0.3);
  animation: slideIn 0.3s ease-out;
}

.quantity-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffe066;
  text-align: center;
  margin-bottom: 15px;
}

.quantity-slider-container {
  margin-bottom: 15px;
}

.quantity-slider {
  width: 100%;
}

.quantity-info {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
}

.quantity-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;

  .cancel-quantity-btn,
  .confirm-quantity-btn {
    min-width: 80px;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  60% {
    opacity: 0.8;
    transform: scale(1.02) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .hand-drawn-item-container {
    padding: 15px;
  }

  .hand-drawn-item-card {
    min-width: 280px;
    max-width: 95vw;
    max-height: 90vh;
  }

  .item-content {
    padding: 20px 15px 15px;
  }

  .item-properties {
    max-height: 50vh;
  }

  .item-title {
    font-size: 18px;
  }

  .item-emoji {
    font-size: 20px;
  }

  .item-icon-img {
    width: 60px;
    height: 60px;
  }

  .property-key {
    font-size: 13px;
  }

  .property-value {
    font-size: 12px;
    padding: 8px 10px;
    line-height: 1.5;

    /* 移动端 HTML 内容样式 */
    :deep(img) {
      width: 60%;
      max-width: 60%;
      display: block;
      margin: 0 auto;
      border-radius: 3px;
    }

    :deep(p) {
      margin: 3px 0;
    }
  }

  .property-item {
    padding: 0 0;
    gap: 4px;
    margin-bottom: 0;
  }

  .property-key {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .item-buttons {
    gap: 8px;

    .cancel-btn,
    .confirm-btn {
      min-width: 70px;
    }
  }

  /* 移动端数量选择器样式 */
  .quantity-selector {
    margin-top: 15px;
    padding: 15px;
  }

  .quantity-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .quantity-info {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .quantity-buttons {
    gap: 8px;

    .cancel-quantity-btn,
    .confirm-quantity-btn {
      min-width: 70px;
    }
  }
}
</style>

<style lang="scss">
.scroll_box {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
</style>

<!-- 全局样式，用于 v-html 内容 -->
<style lang="scss">
.property-value {
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 4px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
  }

  p {
    margin: 4px 0;
  }
}

@media (max-width: 768px) {
  .property-value {
    img {
      width: 60%;
      max-width: 60%;
      display: block;
      margin: 0 auto;
      border-radius: 3px;
    }

    p {
      margin: 3px 0;
    }
  }
}
</style>
